// 消息列表
<template>
 <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div>
       
        <div class="top4">
            <van-nav-bar title="账户明细" left-text="返回" left-arrow :fixed='true' @click-left="onClickLeft" :border='false'>
            <van-icon name="arrow-left" slot="left" color="black" />
            </van-nav-bar>
        </div>
        <div class="box4">
           <p>
               <van-icon name="gold-coin" size="5em"/>
           </p>
           <h1>{{num}}</h1>
        </div>
        <div class="content4">
            <p>8月02日</p>
            <div>
                <p>
                    <span>190</span>
                    <span>余额：10元</span>
                </p>
                <span>
                    <van-icon name="arrow"/>
                </span>
            </div>
        </div>
        <div class="content4">
            <p>7月28日</p>
            <div>
                <p>
                    <span>200</span>
                    <span>余额：200元</span>
                </p>
                <span>
                    <van-icon name="arrow"/>
                </span>
            </div>
        </div>
        <div class="content4">
            <p>7月22日</p>
            <div>
                <p>
                    <span>150</span>
                    <span>余额：400元</span>
                </p>
                <span>
                    <van-icon name="arrow"/>
                </span>
            </div>
        </div>
        <div class="content4">
            <p>7月12日</p>
            <div>
                <p>
                    <span>50</span>
                    <span>余额：550元</span>
                </p>
                <span>
                    <van-icon name="arrow"/>
                </span>
            </div>
        </div>
        
    </div>
</van-pull-refresh>
</template>
<script>
    export default{
        data(){
            return{
               isLoading: false,
               num:10
            }
        },
        methods:{
            onClickLeft(){
                console.log(1)
				this.$router.go(-1)
            },
             onRefresh() {
            setTimeout(() => {
                this.$toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 500);
            }
        },
    }

</script>


<style>
    *{margin: 0 ;padding:0;}
    .top4{border-bottom:3px solid rgba(99, 96, 96, 0.034);margin-top: 1.5rem;}
    .box4{margin: 4%;display: flex;flex-direction: column;border-bottom:1px solid #ccc;padding-bottom: 3% }
    .box4 h1{margin-top: 4%}
    .content4{padding-bottom: 3%;display: flex;justify-content: space-between;margin: 4%;border-bottom: 1px solid #ccc}
    .content4 div{display: flex;align-items:center;}
    .content4 div p{display: flex;flex-direction: column;align-items: flex-end;margin-right:1rem}
</style>